/**
<head>
    <!-- add stylesheet -->
    <link rel='stylesheet' href='./loader-holder.css' />
</head>
<body>
<div id="app">
        <!-- add dom element -->
       <div class="loader-holder">
           <div class="loader-box">
               <span class="loader-box-binary"></span>
               <span class="loader-box-binary"></span>
               <span class="loader-box-text">
                资源正在加载中...
            </span>
           </div>
       </div>
</div>
</body>

*/

.loader-holder {
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0064af;
}

.loader-box {
    width: 130px;
    height: 170px;
    position: relative;
}

.loader-box::before,
.loader-box::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 30px;
    left: 15px;
    z-index: 1;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 20px solid #2D2624;
    transform: scale(1);
    transition: all 0.2s ease;
}

.loader-box-text {
    width: 120%;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: -7%;
    font-family: "Lato";
    font-size: 14px;
    letter-spacing: 2px;
    color: white;
}

.loader-box-binary {
    width: 100%;
    height: 140px;
    display: block;
    color: white;
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 2;
    overflow: hidden;
}

.loader-box-binary::before,
.loader-box-binary::after {
    font-family: "Lato";
    font-size: 24px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.loader-box-binary:nth-child(1)::before {
    content: "0";
    animation: loader-box-ana-a 1.1s linear infinite;
}

.loader-box-binary:nth-child(1)::after {

    content: "0";
    animation: loader-box-ana-b 1.3s linear infinite;
}

.loader-box-binary:nth-child(2)::before {
    content: "1";
    animation: loader-box-ana-c 0.9s linear infinite;
}

.loader-box-binary:nth-child(2)::after {
    content: "1";
    animation: loader-box-ana-d 0.7s linear infinite;
}


@keyframes loader-box-ana-a {
    0% {
        transform: translate(30px, 0) rotate(30deg);
        opacity: 0;
    }
    100% {
        transform: translate(30px, 150px) rotate(-50deg);
        opacity: 1;
    }
}

@keyframes loader-box-ana-b {
    0% {
        transform: translate(50px, 0) rotate(-40deg);
        opacity: 0;
    }
    100% {
        transform: translate(40px, 150px) rotate(80deg);
        opacity: 1;
    }
}

@keyframes loader-box-ana-c {
    0% {
        transform: translate(70px, 0) rotate(10deg);
        opacity: 0;
    }
    100% {
        transform: translate(60px, 150px) rotate(70deg);
        opacity: 1;
    }
}

@keyframes loader-box-ana-d {
    0% {
        transform: translate(30px, 0) rotate(-50deg);
        opacity: 0;
    }
    100% {
        transform: translate(45px, 150px) rotate(30deg);
        opacity: 1;
    }
}
